<template>
  <div id="app">
    <el-container>
      <el-main class="main" style="padding: 0px;">
        <router-view />
      </el-main>
    </el-container>
    <theme-picker />
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";
import { getDictList } from "@/api/project/project";
import { getInfo } from "@/api/login";
import { getToken } from "@/utils/auth";

export default {
  name: "App",
  components: { ThemePicker },
  data() {
    return {
      userInfo: {},
    }
  },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  },

  mounted() {
    //字典
    getDictList().then(res => {
      this.$store.state.dictNew = res.data;
    })
    this.getUser();
  },
  methods: {
    handleLogout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })

      }).catch(() => { });
    },
    getUser() {
      let token = getToken()
      if (this.$store.state.userInfo.userRoleKeyList.length == 0 && token) {
        getInfo().then(res => {
          this.$store.state.userInfo.userName = res.user.userName
          this.$store.state.userInfo.userRole = res.user.nickName
          this.$store.state.userInfo.userRoleKeyList = res.roles
        })
      }
    }
  }
};
</script>
<style scoped lang="scss">
#app .theme-picker {
  display: none;
}

::v-deep .el-container {
  height: 100%;
}

// .main {
//   background-color: #F5F7FA;
//   height: 100%;
// }
</style>
